<template>
	 <!-- home -->
	<view class="content">
	<!-- 	header swiper -->
	   <swiper class="home-swiper" :indicator-dots='indicationPoint'>
		   <swiper-item v-for="(itme,index) in swiperList" class="swiper-item">
				<image :src="itme.imgsrc" style="width: 100%;" mode=""></image>
		   </swiper-item>
	   </swiper>
	    <button @click="request">发送请求</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//swiper indicationPoint
				indicationPoint:true,
				swiperList:[]
			}
		}, 
		//生命周期 监听页面加载
		onLoad() {
         this.loadData()
		},
		methods: {
            loadData(){
				//模拟后端返回数据
				let swiperList =[
					{
						imgsrc:'https://img.yzcdn.cn/vant/cat.jpeg'	
					},
					{
						imgsrc:'https://img.yzcdn.cn/vant/cat.jpeg'		
					},
					{
						imgsrc:'https://img.yzcdn.cn/vant/cat.jpeg'	
					}
				]
			    this.swiperList  = 	swiperList  //轮播图数据
			},
			  // 请求测试
		async request(){
			   console.log('http请求测试')
		   let res 	= await this.$http({
				  url:'https://www.fastmock.site/mock/620d31d20813a71effcba04cbb9740a6/test/api/swiper'
			  })
			 // console.log(res+'res')  
		   }
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
	}
	.home-swiper{
		.swiper-item{
			height: 400rpx;
			background: #007AFF;
		}
	}
    
</style>
